<template>
  <div class="layoutSubPipe">
    <el-form label-width="100px">
      <el-form-item label="子管个数">
        <el-input-number v-model="pipeCount" :min="1" size="mini" @change="updateColorList"></el-input-number>
      </el-form-item>
      <el-table 
        :data="colorTableData" 
        border 
        size="mini" 
        class="color-table"
        max-height="240"
        style="width: 100%">
        <el-table-column prop="index" label="序号" width="80"></el-table-column>
        <el-table-column label="颜色">
          <template slot-scope="scope">
            <div 
              class="color-cell" 
              :style="{backgroundColor: scope.row.colorValue}">
              {{scope.row.colorName}}
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="action-buttons">
        <el-button size="mini" @click="handleCancel">取消</el-button>
        <el-button size="mini" type="primary" @click="handleConfirm">确认</el-button>
      </div>
    </el-form>
    <div v-if="contextMenuVisible" class="custom-color-menu" :style="{left:menuLeft+'px',top:menuTop+'px'}">
      <div v-for="color in colorList" :key="color.C_SYS_COLOR_ID" class="color-menu-item" @click="changeColor(currentRow,color)">
        <div class="color-preview" :style="{background:getColorValue(color)}"></div>
        <span>{{color.COLORNAME}}</span>
      </div>
    </div>
  </div>
</template>
<script>
import {get} from 'lodash';
import {generalIntToRGB} from '@/widgets/mapUtils';
import Vue from 'vue';
import Contextmenu from 'vue-contextmenujs';
Vue.use(Contextmenu);
export default {
  name: 'layoutSubPipe',
  props: {
    colorList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      pipeCount: 1,
      colorTableData: [],
      contextMenuVisible: false,
      currentRow: null,
      menuLeft: 0,
      menuTop: 0
    }
  },
  methods: {
    updateColorList() {
      this.colorTableData = Array.from({length: this.pipeCount}, (_, i) => {
        const colorIndex = i % this.colorList.length;
        const color = get(this.colorList, colorIndex, this.colorList[0]);
        return {
          index: i + 1,
          ID: color.C_SYS_COLOR_ID,
          COLORVALUE: color.COLORVALUE,
          colorName: color.COLORNAME,
          colorValue: this.getColorValue(color)  // 使用getColorValue方法
        };
      });
    },
    getColorValue(color) {
      return generalIntToRGB(get(color, 'COLORVALUE', '#2d8cf0'));  // 添加默认颜色
    },
    showColorMenu(event, row) {
      event.preventDefault();
      this.currentRow = row;
      this.menuLeft = event.clientX;
      this.menuTop = event.clientY;
      this.contextMenuVisible = true;
    },
    changeColor(row, color) {
      row.colorName = color.COLORNAME;
      row.colorValue = generalIntToRGB(color.COLORVALUE);
      this.contextMenuVisible = false;
    },
    handleConfirm() {
      let color = '';
      this.colorTableData.forEach((row, i) => {
        color += `${row.ID},${row.COLORVALUE},color-${i + 1};`;
      })
      this.$emit('confirmSubpipe', {color, num: this.pipeCount});
    },
    handleCancel() {
      this.$emit('cancelSubpipe');
    }
  },
  created() {
    this.updateColorList();
  }
}
</script>
<style lang="scss">
.layoutSubPipe {
  .color-table {
    .el-table__body-wrapper {
      overflow-y:auto;
    }
    .color-cell {
      padding:5px;
      text-align:center;
      color:#fff;
      cursor:pointer;
      width:100%;
      height:100%;
    }
  }
  .custom-color-menu {
    position:fixed;z-index:9999;background:#fff;box-shadow:0 2px 12px 0 rgba(0,0,0,.1);border-radius:4px;max-height:300px;overflow-y:auto;
    .color-menu-item {padding:8px 15px;display:flex;align-items:center;cursor:pointer;
      &:hover {background-color:#f5f7fa;}
      .color-preview {width:20px;height:20px;margin-right:10px;border:1px solid #ddd;}
    }
  }
  .action-buttons {
    margin-top:15px;text-align:right;
    .el-button {margin-left:10px;}
  }
}
</style>